<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <span v-bind:title="message">
          鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
        <span :style="'color:' +color+ ';'">能变颜色的内容</span>
    </div>
    <script>
        var app = new Vue({
        el: '#app',
        data: {
          message: "这里是Vue的内容! 看到了什么" ,
          message: '页面加载于 ' + new Date().toLocaleString(),//这里显示页面加载的时间.
          color: "red"
        }
      });
      </script>

      <div id="app-1">
        <p v-if="seen">看这里 等一下你就看不到了哦  因为我会消失 额 尴尬</p>
      </div>
      <script>
          var app1 = new Vue({
           el: '#app-1', 
            data: {
            seen: true
        }
        })
      </script>

    <hr width="300" align="left"> 

      <div id="app-2">
        <ol>
          <li v-for="todo in todos">
            {{ todo.text }}
          </li>
        </ol>
      </div>
      <script>
      var app4 = new Vue({
        el: '#app-2',
        data: {
          todos: [
            { text: '2021年的第一次作业' },
            { text: '学习 Vue很高兴' },
            { text: '哈哈哈哈' }
          ]
        }
      })
    </script>
    
    <hr width="300" align="left">

    <div id="app-3">  
        <ol>
          <li v-for="todo in todos">
            {{ todo }}
          </li>
        </ol>
      </div>
      <script>
      var app3 = new Vue({
        el: "#app-3",
        data: {
          todos: ['嘚嘚嘚哒哒哒','看我这艘小步fa','你干哈你干哈','给i奥']  //第二种v-for用法
        }
      })
       </script>
</body>
</html>